/*
* @Author: Administrator
* @Date:   2018-09-12 16:18:23
* @Last Modified by:   Administrator
* @Last Modified time: 2018-09-15 11:08:40
*/

import React from 'react';
import { DetailsWrapper, Header, Content } from './style.js';
//在此组件变为一个异步加载的组件的时候如果在需要用用router中的任何东西时都需要因纳入withRouter
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store'; 
//dangerouslySetInnerHTML={{__html: }}表示不对html进行转义
class Details extends React.Component {
	render () {
		return (
			<DetailsWrapper>
			  <Header>{this.props.title}</Header>
			  <Content dangerouslySetInnerHTML={{__html: this.props.content}}>
			  </Content>
			</DetailsWrapper>
		)
	}
	componentDidMount () {
		this.props.getDetails(this.props.match.params.id);
	}
}
const mapState = (state) => ({
  title: state.getIn(['details','title']),
  content: state.getIn(['details','content'])
})
const mapDispatch = (dispatch) => ({
	getDetails (id) {
		dispatch(actionCreators.getDetails(id));
	}
})

export default connect(mapState,mapDispatch)(withRouter(Details));
//这个withRouter意思为让details这个组件有能力获得withRouter中的内容